import { useCallback, useState } from "react";
import { getStorageData } from "utils";
import {
  Image,
  ScrollView,
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from "react-native";
import { useFocusEffect } from "@react-navigation/native";
import translate from "utils/translate";
export default ({ navigation }: RootStackScreenProps) => {
  const [bleList, setBleList] = useState<
    { remark: string; shopName: string; address: string; phone: string }[]
  >([]);
  useFocusEffect(
    useCallback(() => {
      getStorageData("manageList").then((value) => {
        setBleList(value ? JSON.parse(value) : []);
      });
    }, [])
  );
  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <View style={{ alignItems: "center" }}>
          {bleList.map((item, index) => {
            return (
              <TouchableOpacity
                onPress={() => {
                  navigation.push("add", { ...item, index });
                }}
                key={index}
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "space-between",
                  width: "90%",
                  borderBottomColor: "#f9f9f9",
                  borderBottomWidth: 1,
                }}
              >
                <View style={{ flexDirection: "row", alignItems: "center" }}>
                  <Image
                    style={styles.image}
                    source={require("../../assets/images/ble.png")}
                  ></Image>
                  <Text>{item.remark}</Text>
                </View>
                <Image
                  style={{
                    width: 24,
                    height: 24,
                    marginLeft: 12,
                  }}
                  source={require("../../assets/images/arrow-right-bold.png")}
                ></Image>
              </TouchableOpacity>
            );
          })}
        </View>
      </ScrollView>
      <TouchableOpacity
        style={styles.button}
        onPress={() => {
          navigation.push("add", {});
        }}
      >
        <Text
          style={{
            textAlign: "center",
            color: "#fff",
          }}
        >
          {translate("home.AddDevice")}
        </Text>
      </TouchableOpacity>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  scrollView: {
    flex: 1,
  },
  image: {
    width: 60,
    height: 67,
  },
  button: {
    backgroundColor: "#0A59F7",
    width: "80%",
    height: 50,
    marginBottom: 30,
    borderRadius: 16,
    alignItems: "center",
    justifyContent: "center",
    alignSelf: "center",
  },
});
